<template>
  <view class="success-container">
    <!-- 成功图标和文字 -->
    <view class="success-header">
      <image class="success-icon bg-color-1" src="/static/success.png" mode="aspectFit"></image>
      <text class="success-text">报修成功</text>
    </view>

    <!-- 服务进度 -->
    <view class="progress-section">
      <text class="section-title">服务进度</text>
      <view class="progress-steps">
        <view class="step-item" v-for="(step, index) in serviceSteps" :key="index">
          <view class="step-icon bg-color-2">
            <image :src="step.icon" mode="aspectFit"></image>
          </view>
          <text class="step-text">{{ step.text }}</text>
          <!-- 连接线，最后一个步骤不需要 -->
          <view class="step-line" v-if="index !== serviceSteps.length - 1"></view>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="btn continue-btn" @click="handleContinue">
        <text>继续报修</text>
        <image class="btn-icon bg-color-3" src="/static/repair-icon.png" mode="aspectFit"></image>
      </button>
      <button class="btn my-repair-btn" @click="handleMyRepair">
        <text>我的报修</text>
        <image class="btn-icon bg-color-4" src="/static/list-icon.png" mode="aspectFit"></image>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 服务进度步骤数据
const serviceSteps = ref([
  { text: '预约报修', icon: '/static/step1.png' },
  { text: '派单维修员', icon: '/static/step2.png' },
  { text: '上站维修', icon: '/static/step3.png' },
  { text: '验收签字', icon: '/static/step4.png' },
  { text: '服务完成', icon: '/static/step5.png' }
])

// 继续报修
const handleContinue = () => {
  uni.redirectTo({
    url: '/pages/service/create-repair'
  })
}

// 我的报修
const handleMyRepair = () => {
  // 跳转到报修列表页面
  uni.navigateTo({
    url: '/pages/service/repair-list'
  })
}
</script>

<style>
.success-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
}

.success-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.success-text {
  font-size: 36rpx;
  color: #333333;
  font-weight: bold;
}

.progress-section {
  background: #F8F8F8;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 60rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 40rpx;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 20rpx;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}

.step-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  background: #FFFFFF;
  position: relative;
  z-index: 1;
}

.step-icon image {
  width: 40rpx;
  height: 40rpx;
}

.step-text {
  font-size: 24rpx;
  color: #666666;
  text-align: center;
}

.step-line {
  position: absolute;
  top: 40rpx;
  left: 50%;
  right: -50%;
  height: 2rpx;
  background: #DDDDDD;
}

.bottom-buttons {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.btn {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  gap: 10rpx;
}

.continue-btn {
  background: #1890FF;
  color: #FFFFFF;
}

.my-repair-btn {
  background: #FFFFFF;
  color: #333333;
  border: 2rpx solid #DDDDDD;
}

.btn-icon {
  width: 32rpx;
  height: 32rpx;
}

/* 背景色 */
.bg-color-1 {
  background-color: #E3F2FD;
}

.bg-color-2 {
  background-color: #FFFFFF;
}

.bg-color-3 {
  background-color: #FFFFFF;
}

.bg-color-4 {
  background-color: #F5F5F5;
}
</style> 